<template>
    <view class="container">
        <view class="password-form">
            <view class="form-item">
                <text class="label">原密码</text>
                <input class="input" type="password" v-model="passwordForm.oldPassword" placeholder="请输入原密码"
                    @keypress="handleKeypress" />
            </view>

            <view class="form-item">
                <text class="label">新密码</text>
                <input class="input" type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"
                    @keypress="handleKeypress" />
            </view>

            <view class="form-item">
                <text class="label">确认密码</text>
                <input class="input" type="password" v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码"
                    @keypress="handleKeypress" />
            </view>
        </view>

        <button class="submit-btn" @click="handleSubmit">确认修改</button>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request'

const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

const handleSubmit = async () => {
    // 表单验证
    if (!passwordForm.value.oldPassword) {
        uni.showToast({
            title: '请输入原密码',
            icon: 'none'
        })
        return
    }

    if (!passwordForm.value.newPassword) {
        uni.showToast({
            title: '请输入新密码',
            icon: 'none'
        })
        return
    }

    if (!passwordForm.value.confirmPassword) {
        uni.showToast({
            title: '请确认新密码',
            icon: 'none'
        })
        return
    }

    if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
        uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
        })
        return
    }

    // 显示加载提示
    uni.showLoading({
        title: '修改中'
    })

    // 这里应该调用API修改密码
    try {
        // 提交到后端修改密码
        await request.post('/changePassword', {
            oldPassword: passwordForm.value.oldPassword,
            newPassword: passwordForm.value.newPassword
        })

        uni.hideLoading()
        uni.showToast({
            title: '修改成功',
            icon: 'success'
        })

    } catch (err) {
        uni.hideLoading()
        uni.showToast({
            title: err || '修改失败',
            icon: 'none'
        })
    }
}

// 处理键盘事件
const handleKeypress = (e) => {
    if (e.keyCode === 13) { // 回车键的keyCode是13
        handleSubmit()
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx 0;
}

.password-form {
    background: #fff;
    padding: 0 40rpx;

    .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .label {
            font-size: 28rpx;
            color: #333;
            width: 140rpx;
        }

        .input {
            flex: 1;
            text-align: right;
            font-size: 28rpx;
            color: #333;
        }
    }
}

.submit-btn {
    margin: 60rpx 40rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #2196F3;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;

    &:active {
        opacity: 0.9;
    }
}
</style>